<template>
	<scroll-view scroll-y="true" class="scroll-container">
		<view class="scenic-wrapper">
			<text class="content-title">泉州风光</text>
			<swiper class="scenic-swiper" autoplay interval="3000" duration="500" indicator-dots>
				<swiper-item>
					<image src="/static/city1.png" mode="widthFix" ></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city2.jpg" mode="widthFix" ></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city4.jpg" mode="widthFix" ></image>
				</swiper-item>

			</swiper>
		</view>
		<view class="content">
			<text class="content-title">泉州介绍</text>
			<text class="content-title">海上丝绸之路之起点 - 泉州</text>
			<rich-text :nodes="introContent"></rich-text>
		</view>
		<view class="content">
			<text class="content-title">探索进度</text>
			<progress percent="60" show-info></progress>
		</view>
		<view class="content">
			<text class="content-title">选择城市</text>
			<picker mode="region" @change="regionChange">
				<view class="picker-view">当前选择：{{province}}-{{city}}-{{district}}</view>
			</picker>
		</view>
		<view class="content">
			<text class="content-title">泉州宣传</text>
			<video src="/static/city-video.mp4" controls poster="/static/images/video-poster.jpg"
				class="video"></video>
		</view>
		<view class="content">
			<text class="content-title">泉州背景音乐</text>
			<view class="music-container">
				<view class="music-info">
					<image src="/static/music-poster.jpg" mode="widthFix" class="music-cover"></image>
					<view class="music-details">
						<text class="music-title">泉州南音精选</text>
						<text class="music-artist">传统民乐 · 非遗传承</text>
					</view>
				</view>

				<progress :percent="progress" stroke-width="6" class="music-progress" activeColor="#1AAD19"
					backgroundColor="#EEEEEE" />

				<view class="music-controls">
					<button class="control-btn" @click="toggleMusic">
						{{ isPlaying ? '暂停' : '播放' }}
					</button>
					<button class="control-btn" @click="restartMusic" :disabled="!audioLoaded">
						重新播放
					</button>
				</view>
			</view>
		</view>
		<view class="content">
			<text class="content-title">偏好设置</text>
			<view class="preference-item">
				<text>出行方式：</text>
				<radio-group @change="travelModeChange">
					<radio value="bus">公交</radio>
					<radio value="self" checked>自驾</radio>
					<radio value="walk">步行</radio>
				</radio-group>
			</view>
			<view class="preference-item">
				<text>显示推荐景点：</text>
				<switch v-model="showScenic" checked></switch>
			</view>
			<view class="preference-item">
				<text>探索半径: {{radius}}m</text>
				<slider :value="radius" @change="radiusChange" min="100" max="2000"></slider>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				introContent: `
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州南寺、崇武古城、洛阳桥等。</p>
        <p style="color:#0000ff;">特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
      `,
				province: '福建省',
				city: '泉州市',
				district: '丰泽区',
				travelMode: 'self',
				showScenic: true,
				radius: 1000,
				audioContext: null,
				isPlaying: false,
				progress: 0,
				audioLoaded: false,
				musicUrl: '/static/city-music.mp3'
			};
		},
		onLoad() {
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = this.musicUrl;

			this.audioContext.onCanplay(() => {
				this.audioLoaded = true;
			});

			this.audioContext.onTimeUpdate(() => {
				if (this.audioContext.duration > 0) {
					this.progress = Math.floor((this.audioContext.currentTime / this.audioContext.duration) * 100);
				}
			});

			this.audioContext.onEnded(() => {
				this.isPlaying = false;
				this.progress = 0;
			});

			this.audioContext.onError((err) => {
				console.error('音频错误:', err);
				uni.showToast({
					title: '音乐加载失败',
					icon: 'none'
				});
			});
		},
		onUnload() {
			if (this.audioContext) {
				this.audioContext.stop();
				this.audioContext.destroy();
			}
		},
		methods: {
			regionChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
			},
			travelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			radiusChange(e) {
				this.radius = e.detail.value;
			},
			toggleMusic() {
				if (!this.audioLoaded) {
					uni.showToast({
						title: '音乐加载中...',
						icon: 'none'
					});
					return;
				}

				if (this.isPlaying) {
					this.audioContext.pause();
				} else {
					this.audioContext.play();
				}
				this.isPlaying = !this.isPlaying;
			},
			restartMusic() {
				this.audioContext.currentTime = 0;
				this.audioContext.play();
				this.isPlaying = true;
			}
		}
	};
</script>

<style>
	.scroll-container {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.scenic-wrapper,
	.content{
		margin: 15rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 20rpx;
	}

	.scenic-title,
	.content-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
		color: #222;
		padding-left: 5rpx;

	}

	.scenic-swiper {
		height: 400rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	

	.intro-subtitle {
		font-size: 30rpx;
		font-weight:bold;
		font-weight: 500;
		margin-bottom: 15rpx;
		display: block;
	}

	rich-text p {
		font-size: 28rpx;
		line-height: 46rpx;
		margin-bottom: 12rpx;
		color: #555;
		text-align: justify;
	}

	progress {
		width: 100%;
		margin: 15rpx 0;
	}

	.picker-view {
		padding: 15rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}

	.video {
		width: 100%;
		height: 450rpx;
		margin: 10rpx 0;
		border-radius: 8rpx;
	}

	.music-container {
		padding: 15rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
	}

	.music-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.music-cover {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.music-details {
		flex: 1;
	}

	.music-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #222;
		display: block;
		margin-bottom: 8rpx;
	}

	.music-artist {
		font-size: 24rpx;
		color: #666;
	}

	.music-progress {
		margin: 20rpx 0;
		height: 12rpx;
	}

	.music-controls {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 10rpx;
	}

	.control-btn {
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 35rpx;
		background-color: #1296db;
		color: #fff;
		border: none;
	}

	.control-btn[disabled] {
		background-color: #ccc;
	}

	.preference-item {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.preference-item text {
		font-size: 28rpx;
		color: #333;
		min-width: 180rpx;
	}

	radio-group {
		display: flex;
		margin-left: 15rpx;
	}

	radio {
		margin-right: 35rpx;
		font-size: 28rpx;
	}

	switch {
		margin-left: 20rpx;
		transform: scale(1.2);
	}

	slider {
		flex: 1;
		margin-left: 20rpx;
	}
</style>